<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>天气查询  -by 三人行</title>
<meta name="keywords" content="简便快捷天气查询" />
<meta name="description" content="By sanrxteam.com   iazuresky.com" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/spig.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!--.浮动小人-->
<style>
.spig {
	display: block;
	width: 130px;
	height: 170px;
	position: absolute;
	bottom: 300px;
	left: 160px;
	z-index: 9999;
}

#message {
	color: #191919;
	border: 1px solid #c4c4c4;
	background: #ddd;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	min-height: 1em;
	padding: 5px;
	top: -45px;
	position: absolute;
	text-align: center;
	width: auto !important;
	z-index: 10000;
	-moz-box-shadow: 0 0 15px #eeeeee;
	-webkit-box-shadow: 0 0 15px #eeeeee;
	border-color: #eeeeee;
	box-shadow: 0 0 15px #eeeeee;
	outline: none;
}

.mumu {
	width: 130px;
	height: 170px;
	cursor: move;
	background: url(img/spig.png) no-repeat;
}
</style>
<!--.end浮动小人-->
</head>
<!--<a id="returnTop" href="javascript:;">回到顶部</a>
		<script src="js/top.js" type="text/javascript"></script>-->

<body>

	<div id="content">
		<!--导航部分-->
		<div class='card-holder'>
			<div class='card-wrapper'>
				<div class='card bg-01'>
					<span class='card-content'><a href="javascript:goto('body')">首页</a></span>
				</div>
			</div>
			<div class='card-wrapper'>

				<div class='card bg-02'>
					<span class='card-content'><a
						href="javascript:goto('#m_context')">生活指数</a></span>
				</div>
			</div>
			<div class='card-wrapper'>
				<div class='card bg-03'>
					<span class='card-content'><a
						href="javascript:goto('.m_news')">气象新闻</a></span>
				</div>
			</div>
		</div>

		<!--导航结束-->
		<!--当前实况天气-->
		<div class="message" >
			<div class="m_query">
				<div class="date">2017年4月22日</div>
				<div class="city">长沙</div>
				<input class="input" type="text" /> <a href="#" class="btn">查询</a>
			</div>
			<div class="m_details">
				<div class="r_num">25</div>
				<div class="d_left">
					<div id="l_num"></div>
					<div class="l_nav"></div>

				</div>
				<div class="d_right">

					<div class="r_weather">
						<span class="glyphicon glyphicon-certificate"></span>
						<p>晴</p>
					</div>

					<div class="r_wind">
						<span class="glyphicon glyphicon glyphicon-sort"
							aria-hidden="true"></span>
						<p>5级</p>
					</div>
					<div class="r_humidity">
						<span class="glyphicon glyphicon-tint"></span>
						<p>50</p>
					</div>
				</div>
			</div>
		</div>
		<!--建议-->
		<div id="text">
			<p>天气改变命运</p>
			<span> Weather Change Life </span>
		</div>

		<!--未来7天天气详情-->
		<div id="more">
			<div class="m_details">
				<ul>
				</ul>
			</div>
		</div>

	</div>

	<!--生活指数-->

	<div id="m_context">
		<section class="x_context">

			<div class="more2">
				<span>生活指数</span>
			</div>
			<div class="sh_menu">
				<ul>
					<li>
						<div class="pic">
							<img src="img/shengh04.png" width="70" height="70">
						</div> <span class="tg_s">体感温度</span> <span id="tg_s1">温暖、凉爽舒适</span>
						<div class="comments">
							<p>是最适宜人们生活环境的温度</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh07.png" width="70" height="70">
						</div> <span class="tg_s">感冒</span> <span id="tg_s2">低发期</span>
						<div class="comments">
							<p>室内外温差较大，较易引起感冒</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh03.png" width="70" height="70">
						</div> <span class="tg_s">污染</span> <span id="tg_s3">轻度</span>
						<div class="comments">
							<p>对空气污染物扩散无明显影响</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh02.png" width="70" height="70">
						</div> <span class="tg_s">洗车</span> <span id="tg_s4">不适宜</span>
						<div class="comments">
							<p>不适宜洗车</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh08.png" width="70" height="70">
						</div> <span class="tg_s">空调</span> <span id="tg_s5">不需要开</span>
						<div class="comments">
							<p>稍冷，少数人需要开机取暖</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh06.png" width="70" height="70">
						</div> <span class="tg_s">穿衣</span> <span id="tg_s6">适宜穿单衣类</span>
						<div class="comments">
							<p>裤薄型棉衫、长裤、针织长袖衫、长袖T恤。薄型套装</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh05.png" width="70" height="70">
						</div> <span class="tg_s">紫外线</span> <span id="tg_s7">最弱</span>
						<div class="comments">
							<p>紫外线最弱，安全，不需要采取防护措施</p>
						</div>
					</li>
					<li>
						<div class="pic">
							<img src="img/shengh01.png" width="70" height="70">
						</div> <span class="tg_s">运动</span> <span id="tg_s8">不适宜</span>
						<div class="comments">
							<p>人们虽然感觉舒适，但是由于有雨，不适宜户外运动。</p>
						</div>
					</li>
				</ul>
			</div>
		</section>

	</div>
	<!--实时气象新闻-->
	<div id="more3">
		<section class="m_news">
			<div class="m_tital">
				<span>更多新闻</span>
			</div>
			<div class="more_news">
				<li class="ls_on"><img
					src="img/news5.jpg"
					width="160" height="120" alt="广东海南等有大到暴雨 明起全国大部升温">
					<div>
						<h2>北方多地阵风达9级  东北气温跌宕起伏  </h2>
						<p>昨天（5日）内蒙古、东北地区西部和华北北部沙尘天气还将持续，局地沙尘暴，但范围有所缩小。内蒙古、东北多地出现明显降雨降温。今夜开始沙尘天气将逐渐抓减弱。但未来两天大风依旧很强，北京、河北等地最大阵风可达9级，市民需警惕大风带来的不利影响</p>
					</div></li>
				<li class="ls_on"><img
					src="img/news1.jpg"
					width="160" height="120" alt="周末全国大部春光明媚 云南局地有暴雨">
					<div>
						<h2>今年以来最强沙尘袭北方 广东仍有暴雨  </h2>
						<p>5月4日 南方地区的降雨将明显减弱，北方地区降雨主战场转至东北地区。受冷空气和降雨共同影响，全国多地气温下降，其中东北地区降温明显。另外，今明天北方多大风天气，西北地区一带风沙起，内蒙古西部局地或有沙尘暴，公众注意防范。</p>
					</div></li>
				<li class="ls_on"><img
					src="img/news2.jpg"
					width="160" height="120" alt="北方将遭今年来最大规模沙尘 明天范围最大">
					<div>
						<h2>全国大部降雨降温 南方6省区有暴雨  </h2>
						<p>5月2日 我国开启新一轮大范围降雨过程，今天将是本轮降雨的最强时段，江南、华南等大部将有中到大雨，其中6省区局地有暴雨。</p>
					</div></li>
				<li class="ls_on"><img
					src="img/news3.jpg"
					width="160" height="120" alt="冷空气来袭全国“退烧” 西北等有沙尘">
					<div>
						<h2>南方再成降雨重点区 北方持续大风气温走低  </h2>
						<p>5月2日 开始，我国大部地区又将迎来一轮大范围降雨，其中明天降雨强度最强，黄淮、江淮和江南等地将出现大范围强降雨、强对流天气。另外，未来三天，北方大部地区还将有4-6级风。</p>
					</div></li>
				</ul>
			</div>
	</div>
	</section>
	</div>
	<!--  ><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
<script type="text/javascript">  
document.write(returnCitySN["cip"]+','+returnCitySN["cname"])  
</script><!-->

	<script type="text/javascript">
		var currentCity = null;
		var intiTemp = null;
		var wea = null;
		var pic = document.getElementById('l_num');
		//将json文件转换并替换当前天气实时情况	
		$(function() {
			query(returnCitySN["cip"]);
		//alert(returnCitySN["cip"]);
		});
	
		$(function() {
			var city = "长沙";
			query(city);
		});
	
		function query(city) {
			$.ajax({
				type : "post",
				url : "query",
				data : {
					"city" : city
				},
				success : function(data) {
					data = $.parseJSON(data);
					if (data.resultcode == 200) {
						var date = data.result.today.date_y;
						var city = data.result.today.city;
						var temp = data.result.today.temperature;
						var temp1 = data.result.sk.temp;
						if (city == '长沙') {
							intiTemp = temp1;
						}
						var weather = data.result.today.weather;
						wea = weather;
						var advise = data.result.today.dressing_advice;
						var wind_direction = data.result.sk.wind_direction;
						var wind_strength = data.result.sk.wind_strength;
						var humidity = data.result.sk.humidity;
						$(".date").html(date);
						$(".city").html(city);
						$(".r_num").html(temp) + "°";
						$("#content .message .m_details .d_right .r_weather p").html(weather);
						$("#content .message .m_details .d_right .r_wind p").html(wind_direction + wind_strength);
						$("#content .message .m_details .d_right .r_humidity p").html("湿度:&nbsp;" + humidity);
						$("#text p").html(advise);
						if (city == '长沙') {
							//不做
						} else {
							if ((intiTemp - temp1) >= 3) {
								document.getElementById('message').innerHTML = city+"与你当前的城市温差较大如果您是想去那里的话&nbsp&nbsp请您多加衣";
							}
						}
	
						if (wea == '阵雨' || wea == '雷阵雨') {
							pic.style.backgroundImage = "url(img/01_0.png)";
	
						}
						{
							if (wea == '多云' || wea == '多云转阵雨' || wea == '阵雨转多云') {
								pic.style.backgroundImage = "url(img/03_0.png)";
							}
						}
						if (wea == '中雨转小雨' || wea == '中雨') {
							pic.style.backgroundImage = "url(img/21_0.png)";
	
						}
						if (wea == '阴' || wea == '阴转小雨') {
							pic.style.backgroundImage = "url(img/02_0.png)";
	
						}
						{
							if (wea == '多云转晴' || wea == '晴转多云') {
								pic.style.backgroundImage = "url(img/01_0.png)";
							}
						}
						if (wea == '多云转小雨' || wea == '小雨-中雨转多云' || wea == '小雨转阴') {
							pic.style.backgroundImage = "url(img/07_0.png)";
	
						}
						{
							if (wea == '大雨转中雨' || wea == '大雨转小雨') {
								pic.style.backgroundImage = "url(img/09_0.png)";
							}
						}
						if (wea == '雷阵雨转多云' || wea == '大雨转雷阵雨') {
							pic.style.backgroundImage = "url(img/04_0.png)";
	
						}
						{
							if (wea == '晴') {
								pic.style.backgroundImage = "url(img/0.png)";
							}
						}
						{
							if (wea == '浮尘转多云' || wea == '扬沙转晴') {
								pic.style.backgroundImage = "url(img/30_0.png)";
							}
						}
	
						var mores = data.result.future;
						$("#more .m_details ul li").remove();
						for (var i = 0; i < mores.length; i++) {
							var weather = mores[i].weather;
							var temperature = mores[i].temperature;
							var wind = mores[i].wind;
							var week = mores[i].week;
							var date = mores[i].date;
							var month = date.substring(4, 6);
							var day = date.substring(6, 8);
							var li = $("<li></li>");
							li.append("<div>" + month + "&nbsp;/&nbsp;" + day + "</div>");
							li.append("<div>" + week + "</div>");
							li.append("<div>" + weather + "</div>");
							li.append("<div>" + temperature + "</div>");
							li.append("<div>" + wind + "</div>");
							//li.append("<div>" + dressing_advice + "</div>");
							$("#more .m_details ul").append(li);
						}
					} else {
						alert("API接口失效，页面动态数据无法显示。抱歉。。。")
						//alert("请输入正确的城市名");
					}
	
				}
			});
		}
		$(".btn").click(function() {
			var city = $(".input").val();
			currentCity = city;
			query(city);
		});
	
		setInterval(query(currentCity), (1000 * 3600 * 5));
	</script>


	<div id="spig" class="spig">
		<div id="message">亲,输入城市名即可查询天气哦..</div>
		<div id="mumu" class="mumu"></div>
	</div>
	

</body>

</html>